<!--  -->
<template>
  <div class="flex">
    <div class="logo">
      2222
      <!-- <img src="" />  -->
    </div>
    <van-button
      size="large"
      color="#02D199"
      class="btn"
      open-type="getUserInfo"
      @getuserinfo="_wxLogin"
    >
      <van-icon name="weixin" size="16" class-prefix="iconfont"> </van-icon>
      <span>微信登录</span>
    </van-button>
  </div>
</template>

<script>
import wx from '../../utils/wx'
import { StoreUser } from '../../utils/wxstore'
import { wxLogin } from '../../api/login'

export default {
  name: 'login',
  components: {

  },
  data () {
    return {
      code: ''
    }
  },

  computed: {},
  onLoad () {
    this.getWxCode()
  },

  mounted () { },

  methods: {
    async getWxCode () {
      const result = await wx.login()
      if (result.code) {
        this.code = result.code
      }
    },
    async _wxLogin (e) {
      console.log(e)
      const user = e.mp.detail
      console.log(e.mp.detail)
      const result = await wxLogin({ code: this.code, user: user })
      if (result.code === 200) {
        await StoreUser.set(result.token)
        await StoreUser.set(result.data)
        wx.navigateBack()
      }
    }
  }
}
</script>
<style  >
.flex {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
.logo {
  width: 120px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
}
.btn {
  width: 90%;
  display: flex;
  flex-flow: row nowrap;
  border-radius: 6px;
  overflow: hidden;
}
</style>
